<!-- 编辑新闻 -->
<template>
  <div class='bgff h100 pd pt10 dfgfdgtrt'>
    <p class="title-label">{{ isbj ? '编辑' : '新增' }}新闻</p>

    <div class="mt20 sdfgdgdfyt">
      <n-form ref="formRef" label-width="120" :model="form" :rules="rules" :inline="false" size="normal"
        label-placement="left">
        <n-grid :cols="24" :x-gap="20">
          <n-form-item-gi span="24" label="新闻标题:" path="title" class="mt20">
            <n-input v-model:value="form.title" type="text" placeholder="请输入网页标题" size="medium" clearable></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="12" label="新闻分类:" path="fenlei" class="mt20">
            <n-select v-model:value="form.fenlei" size="medium" :options="nksdlist" clearable />
          </n-form-item-gi>
          <n-form-item-gi span="24" label="封面:" path="cover" class="mt20">
            <div class="logo-context vertical-center pr" @click="photoShowModal = true">
              <img :src="form.cover" class="w100 h100 imgjz" v-if="form.cover" />
              <span v-else>点击上传新闻封面</span>
              <i class="iconfont dx-closefill sdfddfsrtxer" v-if="form.cover" @click.stop="form.cover = ''"> </i>
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="新闻详情:" class="mt20">
            <div class="fwbclass ">
              <tinymce ref="tinymceref"></tinymce>
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="&nbsp;" class="mt20 pm20">
            <n-button type="primary" size="medium" @click="baocun">保存</n-button>
            <n-button size="medium" class="ml20" @click="callBack">返回上一页</n-button>
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </div>
    <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>新闻封面</div>
      </template>
      <div>
        <photoGallery @getImg="getImg" types="金纬机械新闻封面"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang='ts' setup>
import { ref,nextTick } from "vue"
import { dxget, dxpost, callBack, qurl } from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import tinymce from "../../components/util/tinymce.vue"
const apiUrl = "jwzz/journalism"
const photoShowModal = ref(false)
const tinymceref = ref()
const formRef = ref()
const cz = qurl()
const isbj = ref(false)
if (cz.id) {
  isbj.value = true
}
const form = ref({
  title: "",
  fenlei: "",
  cover: "",
  synopsis: "",
  details: ""
})
const nksdlist = ref([])
const rules = {
  title: {
    required: true,
    message: '请输入新闻标题',
    trigger: 'blur'
  }, fenlei: {
    required: true,
    message: '请选择新闻分类',
    trigger: 'blur'
  }, cover: {
    required: true,
    message: '请上传新闻封面',
    trigger: 'blur'
  }
}
const getwnewion = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd", { name: 'zjjwnewsClassification' })
  nksdlist.value = data
  console.log(data);
}
getwnewion()
let kjsser = ""
const getImg = (data) => {
  kjsser = data
}
const setImg = () => {
  form.value.cover = kjsser
  photoShowModal.value = false
}
const initData = async () => {
  const { data }: any = await dxget(apiUrl, { id: cz.id })
  form.value = data
  nextTick(() => {
    tinymceref.value.setContent(data.details)
  })
}
if (cz.id) {
  initData()
}
const baocun = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      const fwbtext = tinymceref.value.getContent().trim()
      if (!fwbtext) {
        window.$message.error("请输入新闻详情")
        return
      }
      form.value.details = fwbtext
      form.value.synopsis = tinymceref.value.gettext().trim().slice(0, 200)
      await dxpost(apiUrl, form.value,isbj.value?'put':'post')
      window.$message.success("操作成功")
      callBack()
    }
  })
}
</script>
<style scoped>
.sdfgdgdfyt {
  width: 1200px;
}

.fwbclass {
  height: 800px;
}

.dfgfdgtrt {
  overflow: auto;
}
</style>